<template>
  <view class="live-container">
    <view class="live-header">
      <text class="title">在线直播</text>
      <text class="subtitle">LIVE STREAMING</text>
    </view>
    
    <!-- 轮播广告 -->
    <view class="banner-wrapper">
      <ad-banner></ad-banner>
    </view>
    
    <view class="live-content">
      <view class="live-item">
        <view class="live-status live-status-now">
          <text class="status-text">直播中</text>
        </view>
        <image class="live-cover" src="/static/live-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">开幕式直播</text>
          <view class="meta-row">
            <text class="time">11月07日 09:00-10:00</text>
            <text class="viewer">2345人观看</text>
          </view>
          <text class="speaker">主讲：大会组委会</text>
          <view class="description">
            大会开幕式内容包括领导致辞、大会背景介绍、议程安排说明等环节。欢迎各位与会者准时收看。
          </view>
          <button class="watch-btn" @tap="handleWatch">观看直播</button>
        </view>
      </view>
      
      <view class="live-item">
        <view class="live-status live-status-coming">
          <text class="status-text">即将开始</text>
        </view>
        <image class="live-cover" src="/static/live-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">护理管理学科发展现状与展望</text>
          <view class="meta-row">
            <text class="time">11月07日 09:30-10:30</text>
            <text class="viewer">1024人预约</text>
          </view>
          <text class="speaker">主讲：李教授（北京大学护理学院）</text>
          <view class="description">
            本次报告将从学科发展历程、当前挑战与机遇以及未来方向三个方面进行深入探讨。
          </view>
          <button class="watch-btn coming" @tap="handleReserve">预约提醒</button>
        </view>
      </view>
      
      <view class="live-item">
        <view class="live-status live-status-ended">
          <text class="status-text">已结束</text>
        </view>
        <image class="live-cover" src="/static/live-default.png" mode="aspectFill"></image>
        <view class="info">
          <text class="name">护理质量管理体系建设专题讨论</text>
          <view class="meta-row">
            <text class="time">11月07日 10:30-12:00</text>
            <text class="viewer">已结束</text>
          </view>
          <text class="speaker">主持人：王教授</text>
          <view class="description">
            包括护理质量管理标准探讨、质量改进案例分析以及互动交流三个环节。
          </view>
          <button class="watch-btn ended" @tap="handlePlayback">观看回放</button>
        </view>
      </view>
      
      <view class="decoration-circle circle-1"></view>
      <view class="decoration-circle circle-2"></view>
      <view class="decoration-circle circle-3"></view>
    </view>
  </view>
</template>

<script setup lang="ts">
import AdBanner from '@/components/AdBanner.vue';

const handleWatch = () => {
  uni.showToast({
    title: '直播功能开发中',
    icon: 'none'
  })
}

const handleReserve = () => {
  uni.showToast({
    title: '预约成功',
    icon: 'success'
  })
}

const handlePlayback = () => {
  uni.showToast({
    title: '回放功能开发中',
    icon: 'none'
  })
}
</script>

<style lang="scss">
.live-container {
  min-height: 100vh;
  background-color: #e6f1fc;
  position: relative;
  overflow: hidden;
  
  .live-header {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
    padding: 40rpx 32rpx;
    
    .title {
      color: #ffffff;
      font-size: 36rpx;
      font-weight: 500;
      display: block;
      margin-bottom: 8rpx;
    }
    
    .subtitle {
      color: rgba(255, 255, 255, 0.8);
      font-size: 20rpx;
      display: block;
      letter-spacing: 2rpx;
    }
  }
  
  .live-content {
    padding: 24rpx;
    position: relative;
    
    .live-item {
      background: #ffffff;
      border-radius: 12rpx;
      overflow: hidden;
      margin-bottom: 24rpx;
      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
      position: relative;
      z-index: 2;
      
      .live-status {
        position: absolute;
        top: 16rpx;
        right: 16rpx;
        padding: 6rpx 16rpx;
        border-radius: 8rpx;
        z-index: 3;
        
        &.live-status-now {
          background: rgba(244, 67, 54, 0.9);
          
          .status-text {
            color: #ffffff;
            font-size: 22rpx;
            font-weight: 500;
          }
        }
        
        &.live-status-coming {
          background: rgba(33, 150, 243, 0.9);
          
          .status-text {
            color: #ffffff;
            font-size: 22rpx;
            font-weight: 500;
          }
        }
        
        &.live-status-ended {
          background: rgba(97, 97, 97, 0.9);
          
          .status-text {
            color: #ffffff;
            font-size: 22rpx;
            font-weight: 500;
          }
        }
      }
      
      .live-cover {
        width: 100%;
        height: 300rpx;
      }
      
      .info {
        padding: 24rpx;
        
        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: 600;
          display: block;
          margin-bottom: 16rpx;
        }
        
        .meta-row {
          display: flex;
          justify-content: space-between;
          margin-bottom: 12rpx;
          
          .time {
            font-size: 26rpx;
            color: #00866a;
          }
          
          .viewer {
            font-size: 26rpx;
            color: #666;
          }
        }
        
        .speaker {
          font-size: 26rpx;
          color: #666;
          display: block;
          margin-bottom: 16rpx;
        }
        
        .description {
          font-size: 26rpx;
          color: #666;
          line-height: 1.6;
          margin-bottom: 24rpx;
          background: #f8f8f8;
          padding: 16rpx;
          border-radius: 8rpx;
          border-left: 4rpx solid #1e88e5;
        }
        
        .watch-btn {
          background: #00866a;
          color: #ffffff;
          font-size: 30rpx;
          border-radius: 40rpx;
          
          &:active {
            opacity: 0.8;
          }
          
          &.coming {
            background: #1e88e5;
          }
          
          &.ended {
            background: #9e9e9e;
          }
        }
      }
    }
    
    .decoration-circle {
      position: absolute;
      border-radius: 50%;
      z-index: 1;
      
      &.circle-1 {
        width: 300rpx;
        height: 300rpx;
        background: rgba(0, 134, 106, 0.05);
        top: -120rpx;
        right: -100rpx;
      }
      
      &.circle-2 {
        width: 200rpx;
        height: 200rpx;
        background: rgba(30, 136, 229, 0.05);
        bottom: 80rpx;
        left: -80rpx;
      }
      
      &.circle-3 {
        width: 160rpx;
        height: 160rpx;
        background: rgba(0, 134, 106, 0.08);
        bottom: 200rpx;
        right: -60rpx;
      }
    }
  }
}

// 添加轮播广告容器样式
.banner-wrapper {
  padding: 16rpx 24rpx;
  margin-bottom: 10rpx;
}
</style> 